<!--
 * @Author: zheguo 3188606474@qq.com
 * @Date: 2024-04-21 12:25:41
 * @LastEditors: zheguo 3188606474@qq.com
 * @LastEditTime: 2024-04-24 22:46:02
 * @FilePath: \projectOne\myapp\src\components\adminLogin\loginDialog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="img_content">
        <img src="https://img.zcool.cn/community/01aab15a37c31fa80121db80d26968.jpg@3000w_1l_2o_100sh.jpg"
            style="width: 100%;height: 100%;" alt="">
        <div class="video_content">
<!--            <video src="../../../video/code.mp4" style="width: 100%;height: 100%;" preload="load" loop controls-->
<!--                autoplay></video>-->
        </div>
        <el-button class="back" @click="handleBack">点我返回主页</el-button>
        <el-dialog v-model="LoginfromDiolog" title="请输入管理员信息" width="500">
            <el-form :model="form">
                <el-form-item label="管理员用户名" :label-width="formLabelWidth">
                    <el-input v-model="form.username" autocomplete="off" />
                </el-form-item>
                <el-form-item label="管理员密码" :label-width="formLabelWidth">
                    <el-input v-model="form.password" autocomplete="off" />
                </el-form-item>
                <el-form-item label="管理员验证码" :label-width="formLabelWidth">
                    <el-input v-model="form.identify" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button style="width: 40%;" @click="LoginfromDiolog = false">关闭</el-button>
                    <el-button class="button" style="width: 40%;" type="primary" @click="handleSubmit()">
                        验证
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import axios from 'axios';
import { reactive, ref, onBeforeMount, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import useNavbar_ship from '../../store/Navbar_ship'
const store = useNavbar_ship()
const router = useRouter()
onBeforeMount(() => {
    store.change(false)
})
onBeforeUnmount(() => {
    store.change(true)
})
const LoginfromDiolog = ref(false)
const formLabelWidth = '140px'

const form = reactive({
    username: "",
    password: "",
    identify: ""
})
const handleSubmit = async () => {
    LoginfromDiolog.value = false
    await axios.get(`http://localhost:3030/adminLogin/?username=${form.username}&password=${form.password}&identify=${form.identify}`).then(res => {
        if (res.data.ok === 1) {
            if (!localStorage.getItem("toke")) {
                localStorage.setItem("token", "admin")
                router.push("/030529/xiaomi/admin")
            } else {
                router.push("/030529/xiaomi/admin")
            }
        } else if (res.data.ok === 0) {
            LoginfromDiolog.value = false
            alert("验证失败")
        }
    })
}

const handleBack = () => {
    router.push("/shop/list")
}
onBeforeMount(() => {
    LoginfromDiolog.value = true
})
</script>
<style lang="scss" scoped>
.img_content {
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    .video_content {
        position: absolute;
        left: 26%;
        bottom: 14%;
        width: 800px;
        height: 500px;
    }

    .back {
        position: absolute;
        left: 0;
        top: 0;
    }

    .button {
        background: #eb6617;
        border: none;
    }
}
</style>
